<template>
  <div>
    <Header title="社会组织评估申报平台" :back="true" />
    <div class="content">
      <a-spin :spinning="loading">
        <template v-if="data.length">
          <a-list size="large" bordered :data-source="data">
            <a-list-item
              slot="renderItem"
              slot-scope="item"
              @click="showDetail(item)"
            >
              <a-list-item-meta>
                <a slot="title">
                  {{ item.title || "--" }}
                </a>
                <span slot="description">
                  发布时间：{{ item.pushDate || "--" }}
                </span>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <div class="page">
            <a-pagination
              show-size-changer
              show-quick-jumper
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              :pageSize="pagination.pageSize"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </div>
        </template>
        <a-empty v-else />
      </a-spin>
    </div>
    <a-modal
      v-model="visible"
      title="材料示范"
      :body-style="{ padding: '24px 40px 20px 20px' }"
      :width="1000"
      centered
      :footer="null"
    >
      <div class="box">
        <div class="img" v-if="info.image">
          <img :src="info.image" alt="" />
        </div>
        <div class="title">{{ info.title }}</div>
        <a-divider />
        <!-- <div class="text" v-html="info.detail"></div> -->
        <div v-if="fileType === 'docx'" class="file_container" ref="file"></div>
        <pdf
          v-else-if="fileType === 'pdf'"
          v-for="i in numPages"
          :key="i"
          :page="i"
          :src="pdfUrl"
          style="width: 100%"
          ref="pdf"
        />
        <a-divider />
        <div
          class="file-list"
          v-if="info.notificationFileList && info.notificationFileList.length"
        >
          <div class="file-list-title">参考文件</div>
          <div
            class="file"
            v-for="item in info.notificationFileList"
            :key="item.id"
          >
            <!-- <a :href="item.url" :download="item.original">{{ item.original }}</a> -->
            <div
              @click="handleUpload(item)"
              style="color: #1890ff; cursor: pointer"
            >
              {{ item.original }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Header from "@/components/header.vue";
import { pageList } from "@/api";
import axios from "axios";
const docx = require("docx-preview");
import pdf from "vue-pdf";
export default {
  name: "guidePage", // 材料示范
  components: { Header, pdf },
  data() {
    return {
      loading: true,
      data: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      info: {},
      visible: false,
      pdfUrl: "",
      fileType: "",
      numPages: null,
    };
  },
  methods: {
    getPageList() {
      this.loading = true;
      pageList({ size: this.pageSize, current: this.pageNum, type: 2 }).then(
        (res) => {
          this.pagination = this.getPagination(res.data);
          this.data = res.data.records;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      );
    },
    getPagination(data) {
      const pages = data ? data.pages : 0;
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: (total) => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: (pageNum) => {
          this.pageNum = pageNum;
          this.getPageList();
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current;
          this.pageSize = size;
          this.getPageList();
        },
      };
    },
    showDetail(e) {
      const _ts = this;
      _ts.info = e;
      _ts.visible = true;
      const info = e.detail;
      if (info && info.url) {
        if (info.original.split(".")[1] === "pdf") {
          _ts.fileType = "pdf";
          _ts.pdfUrl = pdf.createLoadingTask(info.url);
          _ts.pdfUrl.promise
            .then((pdf) => {
              _ts.numPages = pdf.numPages;
              console.log(_ts.numPages);
            })
            .catch((err) => {
              console.error("pdf 加载失败", err);
            });
        } else {
          _ts.fileType = "docx";
          axios({
            method: "get",
            responseType: "blob", // 设置响应文件格式
            url: info.url,
          }).then(({ data }) => {
            docx.renderAsync(data, _ts.$refs.file); // 渲染到页面预览
          });
        }
      }
    },
    handleUpload(data) {
      axios
        .get(data.url, {
          responseType: "blob", // 注意返回数据类型
        })
        .then((res) => {
          const url = window.URL.createObjectURL(res.data);
          const linkElement = document.createElement("a"); // 创建点击下载的元素
          linkElement.setAttribute("href", url);
          linkElement.setAttribute("downLoad", data.original);
          linkElement.click();
        });
    },
  },
  created() {
    this.pagination = this.getPagination();
  },
  mounted() {
    this.getPageList();
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-page-header {
  border-bottom: 1px solid rgb(235, 237, 240);
}
.content {
  padding: 3rem;
  .page {
    margin-top: 2rem;
    text-align: right;
  }
}
.box {
  .img {
    overflow: hidden;
    img {
      width: 100%;
      float: left;
    }
  }
  .file_container {
    max-height: 500px;
    overflow-y: scroll;
  }
  .title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-top: 24px;
  }
  .text {
    font-size: 14px;
    color: #444;
  }
  .file-list {
    .file-list-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 12px;
    }
    .file {
      font-size: 14px;
      a {
        color: #1890ff;
      }
    }
  }
}
</style>